<template>
	<view class="page-container">
		<image @click="showBuyPopup" src="/static/imgs/20250530135543.jpg" style="width: 100%; height: 4968rpx"></image>
		<view style="box-sizing: unset;" class="phone-box-icon" @click="handleCallTel">
			</view>
		<!-- <wd-fab :draggable="true" position="right-top" :expandable="false">
			<template #trigger>
				<view class="customer-service-wrapper" @click="handleCallTel">
					<image src="/static/imgs/customer-service.png"></image>
					<view class="customer-service-text">客服</view>
				</view>
			</template>
		</wd-fab> -->
		<u-popup v-model="input_show" @close="myClose" mode="bottom" border-radius="50" height="600">
				<view class="u-flex u-flex-wrap" style="width: 100%;height: 100%;align-items:flex-start;">
					
					<view class="pop-title">停车充电洗车等多场景消费券包</view>
					<view class="pop-q">
						<image style="margin: auto;" src="/static/imgs/20250528123731.png"></image>
					</view>
					<view class="u-flex pop-item u-flex-nowrap" style="margin: 35rpx 50rpx 0 50rpx;">
						<view class="pop-item-l" >原价</view>
						<view class="pop-item-r" style="text-decoration-line: line-through;">￥30</view>
					</view>
					<view class="u-flex pop-item u-flex-nowrap" style="margin: 0 50rpx 0 50rpx;">
						<view class="pop-item-l" >优惠</view>
						<view class="pop-item-r" style="color: #FF0000;">￥20.01</view>
					</view>
					<view class="u-flex pop-item u-flex-nowrap" style="margin: 0 50rpx 0 50rpx;">
						<view class="pop-item-l" >现价</view>
						<view class="pop-item-r" style="color: #FF0000;">￥9.95</view>
					</view>
					<!-- <input maxlength="11" type="number" class="pop-input" placeholder="请输入手机号领取" v-model="formPhone" /> -->
					<view class="pop-bottom u-flex u-flex-nowrap">
						<view class="pop-l" @click="input_show = false">取消</view>
						<view class="pop-r" @click="handlePay">立即支付</view>
					</view>
				</view>
				
				
			</u-popup>
<u-popup v-model="konw" @close="myBuyClose" mode="bottom"  height="100%">
	<view class="cus-in" style="position: fixed;top: 90rpx;right: 10rpx;" @click="handleCallTel"></view>
				<view class="u-flex u-flex-wrap cs" style="width: 100%;height: 100%;align-items:flex-start;flex-direction:column">
					<view class="know-title">购买成功</view>
					<view class="word-ts">此活动为停车优惠券活动，非支付停车费。</view>
					<view class="konw-center"></view>
					<input class="konw-input" @input="inputPhone" placeholder="请输入手机号领取优惠" v-model="formPhone" />
					<view @click="myBuyClose" style="margin: 22rpx auto 0 auto;width: 333rpx;height: 69rpx;">
						<image src="/static/imgs/konw-bo.png" style="width: 100%; height: 100%"></image>
					</view>
					<view class="konw-bottom">如未使用，请联系客服或点击绿色按钮进入下一页售后退款</view>
					
				</view>
				
				
			</u-popup>
		<wd-popup v-model="isBuyPopupShow" position="bottom" :safe-area-inset-bottom="true"
			custom-style="border-radius:32rpx 32rpx 0 0;" closable>
			<view class="buy-popup-wrapper">
				<view class="buy-popup-title" style="margin-bottom: 4px">停车充电洗车等多场景消费券包</view>
				<view class="buy-popup-main">
					<view class="buy-popup-describe-box">
						<image src="/static/imgs/coupon.png" style="width: 30px; height: 30px"></image>
						<view class="describe-right">
							<view class="describe-right-title">30元 立减券包</view>
							<view class="describe-right-desc">包含共享充电桩抵扣券和公交出行抵扣券等</view>
							<view class="describe-right-desc">多张面额多次消费抵扣使用，详见活动页<text class="buy-desc">购买说明</text>
							</view>
						</view>
					</view>

					<view class="price-info">
						<view class="original-price flex">原价 <text>¥30.00</text></view>
						<view class="discount flex">优惠 <text>¥20.05</text></view>
						<view class="final-price flex">现价 <text>¥9.95</text></view>
					</view>
					
					<!-- 手机号 -->
					<!-- #ifdef H5 -->
					<view class="phone-input">
						<view>
							<input maxlength="11" type="number" class="phone-input-input" placeholder="请输入手机号领取" v-model="formPhone" />
						</view>
					</view>
					<!-- #endif -->
					<view class="button-group">
						<wd-button type="info" size="large" class="button-class"
							@tap="isBuyPopupShow = false">取消</wd-button>
						<wd-button size="large" class="button-class" @tap="handlePay">立即支付</wd-button>
						<!-- 	<button class="pay-btn" :class="loading ? 'disabled' : ''" :disabled="loading" @tap="handlePay">
						立即支付
					</button> -->
					</view>
				</view>
			</view>
		</wd-popup>
		<wd-toast />
		<view class="instructions-button" @click="handleRoll">使用说明</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		apiWechatWebPageLogin
	} from "@/api/login";
	import {
		apiOrderPlace
	} from "@/api/order";
	import {
		setMemberInfo
	} from "@/api/member";
	import {
		redirectToWechatAuth
	} from "@/config/config";

	import {
		getUrlParam
	} from "@/utils/utils";
	import {
		useToast
	} from "@/uni_modules/wot-design-uni";
	const toast = useToast();
	//页面加载
	onLoad(async (option) => {
		if (option.channel) {
			uni.setStorageSync("channel", option.channel);
		}
		if(option.param){
			uni.setStorageSync("param", option.param);
		}
		if(option.pid){
			uni.setStorageSync("pid", option.pid);
		}
		
		getWechatCode();
	});
	const isBuyPopupShow = ref(false); //购买弹窗是否显示
	const input_show=ref(false);
	const konw=ref(false);
	const pay=ref(false);
	const show = () => {
		konw.value=true;
		// isBuyPopupShow.value = true;
	};
	//显示购买弹窗
	const showBuyPopup = () => {
		input_show.value=true;
		// isBuyPopupShow.value = true;
	};
	//手机号码
	const formPhone = ref("");
	//客服电话
	const handleCallTel = () => {
		uni.makePhoneCall({
			phoneNumber: "4008381086",
			success: (res) => {},
			fail: (res) => {},
			complete: (res) => {},
		});
	};
	//获取微信
	const getWechatCode = () => {
		let code = getUrlParam("code");
		
		if (code == null || code === "") {
			
			//不存在获取Code
			redirectToWechatAuth();
			// konw.value=true;
		} else {
			// isBuyPopupShow.value = true;
			
			
			//存在就登录
			wechatWebPageLogin(code);

		}
	};
	//登录
	const wechatWebPageLogin = async (code) => {
		
		// input_show.value = true;
		try {
		  const res = await apiWechatWebPageLogin({
		  	code: code,
		  	source: 3
		  });
		  uni.setStorageSync("access_token", res.access_token);
		  if (res.is_order) {
		  	uni.setStorageSync("is_order", res.is_order);
		  	
		  	uni.redirectTo({
		  		url: '/pages/index/index'
		  	});
		  }else{
			  input_show.value = true;
			  let pay = setTimeout(() => {
			  	handlePay()
			  }, 1500);
			  
		  }
		} catch (error) {
			// redirectToWechatAuth();
		  return
		}
		
		
		
		

	};
	//支付
	const handlePay = async () => {
		if(pay.value==true){
			return
		}
		pay.value=true
		// if (!/^\d{11}$/.test(formPhone.value)) {
		// 	toast.error("请输入正确的手机号");
		// 	return;
		// }
		// if(formPhone.value=='13733333333'){
		// 	konw.value=true
		// 	return
		// }


		const {
			payInfo
		} = await apiOrderPlace({
			channel: uni.getStorageSync('channel'),
			param:uni.getStorageSync('param'),
			pid:uni.getStorageSync('pid'),
			phone: '11111111111',
			source: 3,
		});
		checkWXJSBridge(payInfo);
	};

	const inputPhone = async() => {
		if(formPhone.value.length==11){
			try {
			const res = await setMemberInfo({
				phone:formPhone.value
			});
			uni.redirectTo({
				url: '/pages/index/index?msg=1'
			});
			}catch (error){
				
			}
		}
	};
	const checkWXJSBridge = (payData) => {
		let interval = setInterval(() => {
			if (typeof WeixinJSBridge != "undefined") {
				clearTimeout(interval);
				onBridgeReady(payData);
			}
		}, 200);
	};
	const onBridgeReady = (payData) => {
		WeixinJSBridge.invoke(
			"getBrandWCPayRequest", {
				appId: payData.appId, // 公众号名称，由商户传入
				timeStamp: payData.timeStamp, // 时间戳，自1970年以来的秒数
				nonceStr: payData.nonceStr, // 随机串
				package: payData.package,
				signType: payData.signType, // 微信签名方式：
				paySign: payData.paySign, // 微信签名
			},
			function(res) {
				pay.value=false
				if (res.err_msg === "get_brand_wcpay_request:ok") {
					toast.success("支付成功");
					konw.value=true
				} else if (res.err_msg === "get_brand_wcpay_request:cancel") {
					toast.info("取消支付");
				} else {
					toast.error("支付失败");
				}
			}
		);
	};
	//滚动
	const handleRoll = () => {
		uni.pageScrollTo({
			scrollTop: 465, // 滚动到页面的顶部位置
			duration: 300 // 滚动动画的时长，单位ms
		});
	}
	const myClose=()=>{
			  input_show.value=false
	}
	const myBuyClose=()=>{
		// uni.showToast({
		// 	title:'请输入手机号',
		// 	icon:"error"
		// })
			  // konw.value=false
			  uni.redirectTo({
			  	url: '/pages/index/index?msg=1'
			  });
	}
</script>

<style scoped>
	.page-container {
		padding: 0;
	}

	.flex {
		display: flex;
		justify-content: space-between;
	}

	.customer-service-wrapper {
		display: flex;
		flex-direction: column;
		text-align: center;
	}

	.customer-service-wrapper image {
		width: 123rpx;
		height: 100rpx;
	}

	.customer-service-text {
		color: #ff8803;
		border: 1rpx solid #ff8803;
		border-radius: 20rpx;
		background: #fff;
	}

	.buy-popup-wrapper {
		padding: 30rpx;
	}

	.buy-popup-main {
		padding: 10rpx;
	}

	.buy-popup-title {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 40rpx;
		text-align: center;
	}

	.buy-popup-describe-box {
		display: flex;
		background: rgb(254, 241, 206);
		border: 1px solid #000;
		padding: 0rpx 20rpx;
		border-radius: 10rpx;
		align-items: center;

		.describe-right {
			margin-left: 20rpx;
			flex: 1;

			.describe-right-title {
				font-size: 32rpx;
				color: #FE482A;
				font-weight: bold;
				margin: 10rpx 0 10rpx;
			}

			.describe-right-desc {
				font-size: 24rpx;
				color: #999;
				margin-bottom: 10rpx;
			}
		}
	}

	.price-info {
		text-align: left;
		padding: 0;
		line-height: 1.6;
		padding: 10rpx 0;

		view {
			margin: 12rpx 0;
			color: #666;
			font-size: 26rpx;
		}

		.original-price text {
			color: #999;
			text-decoration: line-through;
		}

		.discount text {
			color: #FF0000;
		}

		.final-price text {
			color: #FF0000;
			font-weight: bold;
		}
	}

	.phone-input {
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;

		view {
			width: 80%;
			background: rgba(254, 71, 42, 0.1);
			border-radius: 100rpx;
			padding: 20rpx;
			border: 1px solid #FE472A;
		}

		.phone-input-input {
			width: 100%;
			height: 100%;
			border: none;
			outline: none;
			color: #FE472A;
		}
	}

	.button-group {
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;

		.button-class {
			width: 45%;
		}
	}

	.wd-button.is-primary {
		background: #FD2B18 !important;
	}

	.instructions-button {
		position: absolute;
		background: #000;
		color: #fff;
		writing-mode: vertical-lr;
		top: 400rpx;
		right: 0;
		font-size: 32rpx;
		padding: 20rpx 0rpx;
		border-radius: 20rpx 0 0 20rpx;
	}

	.buy-desc {
		color: #FE482A
	}
	.pop-title{
		margin: 26rpx auto 0 auto;
		width: 100%;
		height: 47rpx;
		font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 34rpx;
		color: #000000;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
	.pop-q {
		display: flex;
		flex-direction: column;
		text-align: center;
		margin: 17rpx auto 0 auto;
	}
	.pop-q image{
		width: 678rpx;
		height: 189rpx;
	}
	.pop-item{
		justify-content: space-between;
		width: 650rpx;
	}
	.pop-item-l{
		width: 50%;
		height: 36rpx;
		font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
		font-weight: 300;
		font-size: 28rpx;
		color: #6C6767;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.pop-item-r{
		width: 50%;
		height: 36rpx;
		font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
		font-weight: 300;
		font-size: 28rpx;
		color: #6C6767;
		text-align: right;
		font-style: normal;
		
		text-transform: none;
	}
	.pop-input{
		margin: 24rpx auto 0 auto;
		width: 630rpx;
		height: 88rpx;
		background: #FFFFFF;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		border: 1rpx solid #8B8B8B;
		line-height: 88rpx;
		font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 35rpx;
		color: #6C6767;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
	.pop-bottom{
		margin: 30rpx auto 42rpx auto;
		width: 650rpx;
		height: 80rpx;
		justify-content: space-between;
	}
	.pop-l{
		width: 303rpx;
		height: 80rpx;
		background: #D9D9D9;
		border-radius: 40rpx;
		line-height: 80rpx;
		font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 35rpx;
		color: #FFFFFF;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
	.pop-r{
		width: 303rpx;
		height: 80rpx;
		background: #21BF64;
		border-radius: 40rpx;
		line-height: 80rpx;
		font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 35rpx;
		color: #FFFFFF;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
	.success-buy{
		background-image: url('/static/imgs/midn.png');
		background-size: 100% 100%;
	}
	.phone-box-icon {
	  position: absolute;
	  top: 17rpx;
	  left: 20rpx;
	  width: 72rpx;
	  height: 92rpx;
	  
	  background-image: url('/static/imgs/cusn.png');
	  background-size: 100% 100%;
	 
	  z-index: 100;
	}
	.know-title{
		margin: 0 auto 0 auto;
		width: 750rpx;
		height: 85rpx;
		background: #F8F8F8;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		color: black;
		font-size: 36rpx;
		line-height: 85rpx;
		text-align: center;
		font-weight: 600;
	}
	.cus-in{
		width: 59rpx;
		height: 74rpx;
		background-image: url('/static/imgs/customin.png');
		background-size: 100% 100%;
	}
	.word-ts{
		width: 100%;
		height: 34rpx;
		padding-left: 23rpx;
		color: black;
		font-size: 24rpx;
		line-height: 34rpx;
		margin: 14rpx auto 0 auto;
	}
	.konw-input{
		width: 700rpx;
		height: 80rpx;
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		border: 4rpx solid #DADADA;
		color: black;
		font-size: 34rpx;
		font-weight: 700;
		line-height: 80rpx;
		margin: 23rpx auto 0 auto;
		padding-left: 17rpx;
	}
	.konw-bottom{
		width: 600rpx;
		height: 28rpx;
		
		color: #939393;
		font-size: 20rpx;
		line-height: 28rpx;
		margin: 29rpx auto auto auto;
		text-align: center;
		
	}
	.konw-center{
		width: 700rpx;
		height: 900rpx;
		background-image: url('/static/imgs/konw-center.png');
		margin: 14rpx auto 0 auto;
		background-size: 100% 100%;
	}
</style>